var translationInitObj = {
	getTranslationCategories: function(){
		var params = 'handler=getCategories&siteArea=Translation&renderType=json';
		var ajaxResults = new Ajax.Request('ajaxDirector.php', {
			method: 'POST',
			parameters: params,
			onSuccess: function(transport) {
				translationViewObj.renderTranslationCategories(transport.responseText);
			}
		});
	}	
}	

var translationViewObj = {
	renderTranslationCategories : function(catJSONString) {
		var jsonObject = eval('('+catJSONString+')');
		var totalCats = (jsonObject.Categories.length)-1;			
		var catRenderString = '';	
		
		for (i = 0; i <= totalCats; i++) {
			var catID    = jsonObject.Categories[i].CatID;
			var catTitle = jsonObject.Categories[i].CatTitle;
			
			catRenderString += '<div class="emphBox"><div class="emphBoxInner">';
			catRenderString += '<div id="transCatTitle" style="float: left; cursor: pointer;" onClick="translationViewObj.toggleTranslationItems('+catID+'); return false;">'+catTitle+'</div>';
			catRenderString += '<div style="float: right;" class="addNewTranslationItem">';
			catRenderString += '<a href="#" class="coolButton buttonBGGreen" onClick="translationUpdateObj.openTranslationItemForm('+catID+'); return false;"><span class="add">Add Item</span></a>';
			catRenderString += '</div><div style="clear: both;"></div>';
			catRenderString += '</div></div>';
			
			/*
			 * Add new item form
			 */
			catRenderString += '<div class="blueBox" id="translationItemForm'+catID+'" style="display: none;">';
			catRenderString += '<div style="width: 25%; float: left;"><label style="vertLabel">Item Label</label><textarea style="width: 200px; height: 50px;" id="translationItemLabel'+catID+'"></textarea></div>';
			catRenderString += '<div style="width: 25%; float: left;"><label style="vertLabel">English</label><textarea style="width: 200px; height: 50px;" id="translationItemEnglish'+catID+'"></textarea></div>';
			catRenderString += '<div style="width: 25%; float: left;"><label style="vertLabel">Spanish</label><textarea style="width: 200px; height: 50px;" id="translationItemSpanish'+catID+'"></textarea></div>';
			catRenderString += '<div style="width: 25%; float: left;"><label style="vertLabel">Russian</label><textarea style="width: 200px; height: 50px;" id="translationItemRussian'+catID+'"></textarea></div>';
			catRenderString += '<div style="clear: left; height: 5px;"></div>';
			
			catRenderString += '<div style="float: left; margin-right: 10px;"><a href="#" class="coolButton buttonBGGreen" onClick="translationUpdateObj.saveTranslationItem('+catID+'); return false;"><span class="save">Save</span></a></div>'
			catRenderString += '<div style="float: left;"><a href="#" class="coolButton buttonBGRed" onClick="translationUpdateObj.closeTranslationItemForm('+catID+'); return false;"><span class="cancel">Cancel</span></a></div>'
			catRenderString += '<div style="clear: left;"></div>';
			catRenderString += '</div>';
			catRenderString += '<div id="translationItems'+catID+'" style="display: none;"></div>';
			
		}	
		
		$('translationCategoryContainer').innerHTML = catRenderString;
	},
	toggleTranslationItems : function(catID) {
		var displayContainer = $('translationItems'+catID);
		if (displayContainer.style.display == '') {
				new Effect.SlideUp(displayContainer, {direction: 'top', duration: .3});
		} else {
			this.getTranslationItems(catID);
		}
	},
	getTranslationItems : function(catID) {
		var params = 'handler=getTranslationItems&catID='+catID;
		var ajaxResults = new Ajax.Request('ajaxDirector.php', {
			method: 'POST',
			parameters: params,
			onSuccess: function(transport) {
				translationViewObj.renderTranslationItems(transport.responseText);
			},
			onFailure: function() {
				alert('Oops!');
			}	
		});
	},
	renderTranslationItems : function(jsonString) {
		var rowClass;
		var jsonObject = eval('('+jsonString+')');
		var totalItems = (jsonObject.TranslationItems.length)-1;			
		var itemRenderString = '<table class="dataTable" style="font-size: 1em;">';	
		itemRenderString += '<tr>';
		itemRenderString += '<th style="width: 5%;"></th>';
		itemRenderString += '<th style="width: 20%;">Label</th>';
		itemRenderString += '<th style="width: 25%;">English</th>';
		itemRenderString += '<th style="width: 25%;">Spanish</th>';
		itemRenderString += '<th style="width: 25%;">Russian</th>';
		itemRenderString += '</tr>';
		
		for (i = 0; i <= totalItems; i++) {
			if ((i % 2) > 0) { 
				rowClass = 'altRow'; 
			} else { 
				rowClass = '';
			}
			var itemID  = jsonObject.TranslationItems[i].TID;
			var catID   = jsonObject.TranslationItems[i].SiteArea;
			var label   = jsonObject.TranslationItems[i].TransLabel;
			var english = jsonObject.TranslationItems[i].TransEnglish;
			var spanish = jsonObject.TranslationItems[i].TransSpanish;
			var russian = jsonObject.TranslationItems[i].TransRussian;
			
			itemRenderString += '<tr id="rowID'+itemID+'" class="'+rowClass+'">';
			itemRenderString += '<td style="text-align: center;" id="cellAction'+itemID+'"><a href="#" onClick="translationUpdateObj.convertRowToEditForm('+itemID+'); return false;" title="Edit this entry"><img src="images/buttonEditBig.gif" style="border: none;" alt="Edit this entry" /></a></td>';
			itemRenderString += '<td id="cellLabel'+itemID+'">'+label+'</td>';
			itemRenderString += '<td id="cellEnglish'+itemID+'">'+english+'</td>';
			itemRenderString += '<td id="cellSpanish'+itemID+'">'+spanish+'</td>';
			itemRenderString += '<td id="cellRussian'+itemID+'">'+russian+'</td>';
			itemRenderString += '</tr>';
			
		}	
		
		itemRenderString += '</table>';	
		$('translationItems'+catID).innerHTML = itemRenderString;
		new Effect.SlideDown('translationItems'+catID, {direction: 'top', duration: .3});
	}
}

var translationUpdateObj = {
	openTranslationItemForm : function(catID) {
		var panelID = 'translationItemForm'+catID;
		new Effect.SlideDown(panelID, {direction: 'top', duration: .3});
		
	},
	closeTranslationItemForm : function(catID,itemID) {
		if (catID != 0) {
			var panelID = 'translationItemForm' + catID;
			new Effect.SlideUp(panelID, {
				direction: 'top',
				duration: .3
			});
			
			/*
			 * Clear entry form
			 */
			$('translationItemLabel'+catID).value = '';
			$('translationItemEnglish'+catID).value = '';
			$('translationItemSpanish'+catID).value = '';
			$('translationItemRussian'+catID).value = '';
		} else {
			var textEnglish = $('cellEnglish'+itemID).innerHTML;
			var textSpanish = $('cellSpanish'+itemID).innerHTML;
			var textRussian = $('cellRussian'+itemID).innerHTML;
			
			$('cellAction'+itemID).innerHTML  = '<a href="#" onClick="translationUpdateObj.convertRowToEditForm('+itemID+'); return false;" title="Edit this entry"><img src="images/buttonEditBig.gif" style="border: none;" alt="Edit this entry" /></a>';	
			$('cellEnglish'+itemID).innerHTML = $F('translationItemEnglish'+itemID);
			$('cellSpanish'+itemID).innerHTML = $F('translationItemSpanish'+itemID);
			$('cellRussian'+itemID).innerHTML = $F('translationItemRussian'+itemID);
		}			
	},
	convertRowToEditForm : function(itemID) {
		var textEnglish = $('cellEnglish'+itemID).innerHTML;
		var textSpanish = $('cellSpanish'+itemID).innerHTML;
		var textRussian = $('cellRussian'+itemID).innerHTML;
		
		$('cellEnglish'+itemID).innerHTML = '<textarea style="width: 200px; height: 50px;" id="translationItemEnglish'+itemID+'">'+textEnglish+'</textarea>';
		$('cellSpanish'+itemID).innerHTML = '<textarea style="width: 200px; height: 50px;" id="translationItemSpanish'+itemID+'">'+textSpanish+'</textarea>';
		$('cellRussian'+itemID).innerHTML = '<textarea style="width: 200px; height: 50px;" id="translationItemRussian'+itemID+'">'+textRussian+'</textarea>';
		$('cellAction'+itemID).innerHTML  = '<a href="#" onClick="translationUpdateObj.saveTranslationItem(0,'+itemID+'); return false;" title="Save entry"><img src="images/buttonSave.gif" style="border: none;" alt="Save entry" /></a>';
	},
	saveTranslationItem : function(catID,itemID) {
		/*
		 * Save stuff then...
		 */
		if (catID != 0) {
			var dataString = {
				catID:   catID,
				itemID:  itemID,
				label:   $F('translationItemLabel'+catID),
				english: $F('translationItemEnglish'+catID),
				spanish: $F('translationItemSpanish'+catID),
				russian: $F('translationItemRussian'+catID)
			};	
		} else {
			var dataString = {
				catID:   catID,
				itemID:  itemID,
				english: $F('translationItemEnglish'+itemID),
				spanish: $F('translationItemSpanish'+itemID),
				russian: $F('translationItemRussian'+itemID)
			};	
		}
		
		jsonString = Object.toJSON(dataString);
		
		var params = 'handler=saveTranslationItem&jsonString='+jsonString;
		var ajaxResults = new Ajax.Request('ajaxDirector.php', {
			method: 'POST',
			parameters: params,
			onSuccess: function(transport) {
				if (catID != 0) {
					translationViewObj.renderTranslationItems(transport.responseText);
				}
			},
			onFailure: function() {
				alert('Oops!');
			}	
		});
		
		/*
		 * Close form panel
		 */
		this.closeTranslationItemForm(catID,itemID);
	}
}	

var viewTabContent = {
	content0Load : function() {
		
	}
}

Ext.onReady(function() {
	translationInitObj.getTranslationCategories();
});
